<template>
  <div>
    <!--文创商品-->
    <content-header :title="routeItem.title"></content-header>
    
    <div class="tab-header xui-margin-top-lg">
      <span>类别：</span>
      <category-tabs
        :tabList="tabList"
        :tabIndex="tabIndex"
        @changeCategory="refreshProdList"
      ></category-tabs>
    </div>

    <div class="xui-margin-top-sm">
        <!-- <el-input v-model="search" placeholder="请输入商品名称" style="width:200px" size="small" @change="onSearch"  clearable></el-input> -->
        <input type="text" class="search-input"  v-model="search" placeholder="请输入商品名称" style="width:200px" @keyup.enter="onSearch">
        <el-button type="primary" @click="onSearch" plain size="small">查询</el-button>
    </div>

    <div class="xui-fc xui-margin-top-md">
      <img-card :item="item" v-for="(item,index) in listData" :href="`${routePath}/detail/${item.id}`"
                :key="index"></img-card>
    </div>

    <el-pagination
      background
      v-if="page.count"
      layout="prev, pager, next"
      :total="page.count"
      class="xui-margin-top xui-text-center"
      :current-page.sync="page.index"
      :page-size="page.size"
      @current-change="handlePage">
    </el-pagination>

  </div>
</template>

<script>
import CategoryTabs from "../../../components/widge/category-tabs/tab-bar";
import ContentHeader from "../../../components/widge/content-header";
import ImgCard from "../../../components/list/img-card";
import { getProdType, getProdList } from "@/api/list";

export default {
  components: {
    ImgCard,
    ContentHeader,
    CategoryTabs
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [],
      listData: {},
      tabName: "",
      search: "",
      page: {
        index: 1,
        count: null,
        size: 12
      }
    };
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    },
    routePath() {
      return this.$route.path;
    }
  },
  methods: {
    refreshProdList(item) {
      this.tabIndex = Number(item.index);
      this.page.index = 1;
      this.tabName = item.name;
      this.getProdList(item.name, this.page.index, this.search);
    },
    getProdList(typeName, pageIndex, title) {
      let name = typeName === "全部" ? "" : typeName;
      getProdList(name, pageIndex, title).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
      });
    },
    handlePage(pageIndex) {
      this.getProdList(this.tabName, pageIndex);
    },
    onSearch() {
      this.getProdList(this.tabName, this.page.index, this.search);
    }
  },
  mounted() {
    getProdType().then(res => {
      let typeList = res.data[0].subList;
      let result = [
        {
          index: 0,
          name: "全部"
        }
      ];
      typeList.forEach(item => {
        let type = {};
        type.index = item.id;
        type.name = item.menuName;
        result.push(type);
        this.tabList = result;
      });
    });
    this.getProdList();
  }
};
</script>

<style lang="less" scoped>
.tab-header span,
.tab-header .category-tabs {
  display: inline-block;
}
.search-input {
  border: 1px solid #dcdfe6;
  padding: 8px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
}
.search-input:hover {
  border-color: #ccc;
}
.search-input:focus {
  border-color: #bf9c51;
}
</style>
